<template>
  <div class="view-box">
    <p >{{title}}</p>
    <RPIframe v-if="initFinish" :src='taskReportUrl'></RPIframe>
  </div>
</template>

<script>
import RPIframe from '@/components/common/RPIframe.vue'
import coverApi from '@/api/cover.js'
export default {
  name: 'groupViewReport',
  components: {
    RPIframe,
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    code: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      initFinish: false,
      onlineSysDomain: '',
      taskReportUrl: '',
    }
  },
  created: function () {
    this.init()
  },
  methods: {
    init() {
      coverApi.getCodeList('ONLINE_SYS_DOMAIN').then((res) => {
        let rescords = res.data.records
        if (rescords.length > 0) {
          this.onlineSysDomain = rescords[0].vsiDescription
          this._getUrl()
        }
      })
    },
    // 构建查看url
    _getUrl() {
      if (this.onlineSysDomain) {
        if (this.code == 'group-view-2023') {
          this.taskReportUrl = `${this.onlineSysDomain}/eeacbfc20b5f51d7287ae4cc02779c08`
        } else if (this.code == 'group-view-2022') {
          this.taskReportUrl = `${this.onlineSysDomain}/597c5040493cae4f574f786f38fccb56`
        } else if (this.code == 'group-view-all') {
          this.taskReportUrl = `${this.onlineSysDomain}/83f1cf05892a732052769b623a70345d`
        }
        this.initFinish = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.view-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  p {
    padding: 10px;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
  }
  .tabs-app {
    display: flex;
    flex: 1;
    flex-direction: column;
    /deep/.ivu-tabs-content  {
      flex: 1;
    }
  }
}
.legend-box {
  width: 200px;
  p {
    padding-left: 0
  }
}
.legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  width: 130px
}
.legend {
  width: 48px;
  height: 16px;
}
.notStartClass {
   background-color: #EBEEF7;
}
.surpassClass {
  background-color: #3CDBC4;
}
.exceedClass {
  background-color: #4391FA;
}
.postponeClass {
    background-color: #7B89FF;
}
.normalClass {
   background-color: #3CDBC4;
}
.legend-icon {
  font-size: 24px;
  font-weight: 700;
}
.tabs-app {
  /deep/.ivu-tooltip {
    padding-top: 10px;
    margin-right: 10px;
  }
}

</style>

